<template>
	<page
	:pageStyle="config.pageStyle" 
	:headerStyle="config.headerStyle" 
	:bodyStyle="config.bodyStyle" 
	:footerStyle="config.footerStyle">
		<div slot="pageHeader">
			<div>{{config.HeaderTitle}}</div>
		</div>
		<div slot="pageContent">
			<div style="font-weight: bolder;font-size: 20px;text-align: center;margin-bottom: 20px;">{{config.ContentTitle}}</div>
			<div style="cursor: pointer;">
				<div v-for="(item,i) in config.list" @click="handleClick(i)" style="z-index: 1;position: relative;">
					<span style="background-color: white;position: relative;z-index: 2;">{{(i+1)+". "+item.name}}<span style="float: right;background-color: white;position: relative;z-index: 2;">{{item.number}}</span></span>
					<hr style="border:1px dotted #000;z-index: 1;position: absolute;top:0;width: 99%;"/>
					<div v-for="(value,v) in item.children" v-show="show===i" style="position: relative;" @click="jump">
						<span style="padding-left: 1em;background-color: white;position: relative;z-index: 2;">{{(i+1)+'.'+(v+1)+" "+value.name}}<span style="float: right;background-color: white;position: relative;z-index: 2;">{{item.number}}</span></span>
						<hr style="border:1px dotted #000;z-index: 1;position: absolute;top:0;width: 99%;"/>
					</div>
				</div>
			</div>
		</div>
		<div slot="pageFooter">
			<div>{{config.FooterTitle}}</div>
		</div>
	</page>
</template>

<script>
	import page from './page.vue'
	export default {
		name:"treeMenu",
		components:{
			page
		},
		data(){
			return {
				show:-1
			}
		},
		props:{
			config:{
				type:Object,
				default:{
					pageStyle:{},
					headerStyle:{},
					bodyStyle:{},
					footerStyle:{},
					HeaderTitle:"",
					FooterTitle:"",
					ContentTitle:"目录"
				}
			},
			jump:{
				type:Function,
				default(){
					return console.log("跳转")
				}
			}
		},
		methods:{
			handleClick(i){
				// console.log(i)
				if(this.show===i){
					this.show=-1
				}else{
					this.show=i
				}
			}
		}
	}
</script>

<style>
</style>
